{% extends "input_layout.html" %}
{% block content %}
    <form class="form-signin" method="post" action="">
        {{ form.hidden_tag() }}
        <img class="mb-4" src="static/自然之窗.png" alt="" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">登陆</h1>
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% if form.email.errors %}
            {{ form.email(class="form-control is-invalid", placeholder="邮箱", style="margin-bottom: 20px !important;" "border-radius: 20px !important;") }}
            <div class="invalid-feedback">
                {% for error in form.email.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
            </div>
        {% else %}
            {{ form.email(class="form-control", placeholder="邮箱", style="margin-bottom: 20px !important;" "border-radius: 20px !important;") }}
        {% endif %}

        {% if form.password.errors %}
            {{ form.password(class="form-control is-invalid", placeholder="密码", style="margin-bottom: 20px !important;" "border-radius: 20px !important;") }}
            <div class="invalid-feedback">
                {% for error in form.password.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
            </div>
        {% else %}
            {{ form.password(class="form-control", placeholder="密码", style="margin-bottom: 20px !important;" "border-radius: 20px !important;") }}
        {% endif %}

		        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
<style>
        .btn-primary{
            background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
            border-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
			color: #000080;
        }
        .btn-lg,
        .btn-group-lg > .btn {
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.3333333;
        border-radius: 20px;
        }
        button, input, optgroup, select, textarea{
        margin: 12;font: inherit;
        }
		body{  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}
    </style>

        <div class="pt-3" style="margin-top: 25px !important;">
            <small class="text-muted">
                还没有账号？<a href="{{ url_for('register') }}">前往注册</a>
            </small>
        </div>
        <a class="btn btn-outline-secondary btn-sm" style="margin-top: 10px !important;" href='{{ url_for('welcome') }}'>返回首页</a>
    </form>
{% endblock content %}
